import React, { memo, useEffect, useState } from "react";
import { getPersonalCheck } from "@common/envOverviewApi/doc";
import { PersonalCheckInitialState } from "@model";
import Highlight from "react-highlight";
import "highlight.js/styles/vs2015.css";
import "./style.less";
import { Collapse, Empty } from "antd";
import { Link } from "react-router-dom";

type Props = {
  nodeName: string;
};

/**
 * @func 个性化检查页面组件
 * @param props
 * @returns React.FC
 */
const PersonalCheck: React.FC<Props> = (props) => {
  const [data, setData] = useState(PersonalCheckInitialState);

  const { nodeName } = props;
  const { Panel } = Collapse;

  useEffect(() => {
    getPersonalCheckData();
  }, []);

  const getPersonalCheckData = async () => {
    try {
      const json = await getPersonalCheck(nodeName);
      setData(json);
    } catch (err) {}
  };

  return (
    <div className="personal-check">
      {data.found && data._source.personalcheck ? (
        <Collapse defaultActiveKey={["0"]}>
          {data._source.personalcheck.map((item, index) => (
            <Panel
              header={
                <span style={{ color: item.checkstatus ? "green" : "red" }}>
                  {item.name}
                </span>
              }
              key={index}
              extra={
                item.checkstatus ? (
                  <span style={{ color: "green" }}>正常</span>
                ) : (
                  <span style={{ color: "red" }}>异常</span>
                )
              }
            >
              <div className="personal-check-item" key={item.checkid}>
                <div className="personal-check-item-wrapper">
                  <div className="personal-check-item-content">
                    <p>配置ID:</p>
                    {item.checkid !== null && item.checkid !== "" ? (
                      <span>
                        <Link
                          to={{
                            pathname: `/collect/modify/check/${item.checkid}`,
                          }}
                        >
                          {item.checkid}
                        </Link>
                      </span>
                    ) : (
                      <span>null</span>
                    )}
                  </div>
                  <div className="personal-check-item-content">
                    <p>个性化校验状态:</p>
                    <span>{item.checkstatus ? "正常" : "异常"}</span>
                  </div>
                  <div className="personal-check-item-content">
                    <p>校验时间:</p>
                    <span>{item.time}</span>
                  </div>
                </div>
                <Highlight>{item.output}</Highlight>
              </div>
            </Panel>
          ))}
        </Collapse>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </div>
  );
};

export default memo(PersonalCheck);
